我們終於寫出了第一支 .html 與 .css 檔案了，有沒有覺得 HTML 標籤與 CSS 樣式的種類越來越多，所以想不起來的字、和拼錯的字也越來越多？天啊，我是阿嬤，從來沒想到要背這麼多東西，而且有些單字還很長啊！不是說工程師都很懶嗎？這樣我還要勤奮記單字，還要勤奮拼字檢查耶！
既然工程師這麼懶，有沒有什麼好用的道具，可以幫我們不用背出完整的單字，就可以寫出完整的程式碼呢？你看，像我們用手機打英文單字的時候，手機不是都會自動預測和校正嗎？甚至，如果在我們的程式寫得不太對勁，例如少了分號啦、括弧缺一邊的時候，可以像拼字檢查那樣，提醒我們一下，不是很好嗎？哆啦A夢，有沒有什麼好用的道具...
還真的有！我們有些程式，可以在我們打下幾個字母的時候，就自動替我們找出或補完想打出的單字。這些程式，我們就叫作「程式碼編輯器」。
市面上有非常多程式碼編輯器，目前比較流行的，大概是 VSCode 和 Sublime 兩種。
什麼？我有選擇障礙，不要給我選項，告訴我要用哪種啊啊啊！
那就使用 VSCode 吧！因為 VSCode 是開源軟體。
開源？什麼是開源？開源節流嗎？
任何我們使用的軟體，就像所有網站一樣，背後都是用程式碼寫成的。不過，許多時候，因為軟體是某些公司的商品，所以我們不會看到軟體背後的程式碼怎麼寫；這種程式碼不公布的軟體，叫作「專有軟體」。當我們發現專有軟體的問題，因為我們也不知道後面程式碼長怎樣，所以也只好聯絡軟體公司，讓軟體企業內部員工進行修正。同理，當我們覺得專有軟體功能不夠完善，也只好回報軟體公司，並且等待軟體後續更新。
相反地，許多軟體的創作者，會將所有程式碼公布出來，並且允許所有人加入修改。無論是任何人發現軟體的問題，或者想要讓軟體的功能變得更強大，都可以加入修改這個軟體的行列。這種軟體，我們就叫作「開源軟體」。我們可以想像，這些軟體的問題修復與功能擴充，應該會比專有軟體來得快很多。畢竟，全世界的工程師，都可以加入開源軟體的修正與撰寫。
VSCode 這款開源軟體，有非常多強者幫我們編寫了好用的功能，也有相當好的中文化支援。可以點這邊下載。
安裝完 VSCode 之後，我們點開紅圈處的擴充功能 (Extensions)：
並且在右側的搜尋列中，打入 "Chinese" 以後，選擇「繁體中文」，
選擇 install，安裝完以後重開 VS code，就可以把介面中文化囉！
當我們選擇「檔案」，再選擇「新增檔案」以後，會看到 VSCode 很貼心地請我們
選擇一個語言，
我們就輸入 html 吧！我們也可以看到，VSCode 支援非常多種程式語言。在告訴 VSCode 我們現在想寫的語言之後，它就會作出很多超棒的協助喔！
還記得我們昨天提到的 DOCTYPE 標籤嗎？
<!DOCTYPE html>
那就讓我們輸入半形驚嘆號 "!" 看看吧！
!()[https://i.imgur.com/q9P4Wqs.png]
結果跑出了兩個選項！按鍵盤的上下箭頭可以選擇，我們先選第一個，按下 Enter 或 tab 都可以喔。
!()[https://i.imgur.com/swr9SPu.png]
太神奇啦！瞬間跑出 12 行 HTML 標籤！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
title>Document</title>
</head>
<body>
</body>
</html>
有沒有發現這個結構很眼熟？沒錯，這不就是我們昨天講過， .html 檔案的通用結構嗎？VSCode 知道我們寫 .html 檔案大概就是這個格式，所以就自動幫我們完成了。只需要輸入 1 個半形驚嘆號，就可以完成 12 行，是有沒有這麼懶！
接著，讓我們來加幾個標籤看看。以前打一個 p 標籤，要打超多符號的。現在只要輸入 p，再按下 tab... 耶，p 標籤完成囉！想加入 class 是 productInfo 的 p 標籤怎麼辦呢？還記得 class 的 CSS 選擇器是什麼嗎？加個半形句點就行了。因此，我們輸入 p.productInfo，再按下 tab... 耶，跑出了
<p class="productInfo"></p>
那如果單純輸入類別名稱，例如 .gavagai，再按下 tab，會跑出什麼呢？這就交給各位阿嬤自己去實驗囉！
那讓我們再試試看 .css 檔是不是也這麼有用。同樣開新檔案，選擇 CSS 這個語言。我們先作個 gavagai 這個類別的樣式看看。
.gavagai{
}
這時候會發現，我們的 .gavagai 被劃上黃色底線了！
怎麼會!?是我寫錯什麼嗎？別擔心，讓我們把滑鼠移上去看看：
它說「不要使用空的樣式組合」。喔喔，原來是提醒我們，這個類別還沒放上樣式，這樣這個類別會變得沒什麼意義。是的，程式碼編輯器就是這麼貼心，連我們寫了沒必要的程式碼，都會提醒我們。那就讓我們繼續往下寫吧！
寫 CSS 樣式的時候，會有很多很長的屬性對吧。例如 background-image 就超長的啊！那各位阿嬤覺得，會想怎麼偷懶縮寫呢？試試看 bgi 吧！真的有選項跑出來耶！我們再按下 tab... 噹啦，
.gavagai{
background-image: url();
}
不只連屬性打好了，連值都知道我們會需要 url() 中間放位址，所以也幫我們把 url() 寫好了囉！是不是天堂！
VSCode 的自動完成功能非常完善，就先交給各位阿嬤自己享受遊玩。接下來，每次都要寫完 .html 檔後儲存，再點開看網頁長怎樣，是不是很煩躁呢？儘管我們還有段時間才會接觸後端，不過這個煩躁感，會隨著我們越往後端靠近，越加嚴重。
沒關係，VSCode 有個非常有名的擴充功能，叫作 "Live server"，就是為了解決這個問題而產生。先讓我們按照上面介紹的方式，找到這個擴充功能並且安裝。然後，選擇「檔案」，再選擇「開啟資料夾」，找到存放 .html 檔的資料夾後，點選「選擇資料夾」。點開 .html 檔後，就可以對程式碼區域按右鍵，點選 "Open with Live Server"，使用瀏覽器開啟我們寫好的網頁囉！最棒的是，無論我們修改任何檔案，我們的網頁都會立刻同步改變！是不是超方便呢？
iThome鐵人賽
看影片追技術